// 专门用于路由器

import VueRouter from "vue-router";
import About from "../components/About.vue"
import Home from "../components/Home.vue"

import News from "../components/Home/News.vue"
import Message from "../components/Home/Message.vue"
import Detail from "../components/Home/Detail.vue";

const router = new VueRouter({
    routes: [
        //region 一级路由
        {
            name: "chengheng",
            path: "/about.html", // 这个是路由，并不是访问的html文件
            component: About
        },
        //endregion
        //region 多级路由
        {
            name:"zhuye",
            path: "/Home", // 这个是路由，并不是访问的html文件
            component: Home,
            children: [
                {
                    name: "xinwen",
                    path: "news", //子，不需要添加/， 底层遍历的时候给加上了， 添加/news 就出问题
                    component: News,
                    meta: {isAuth: true}, // 路由全局守卫，判断用的
                    // 给单独的路径拦截
                    /*beforeEnter(to, from, nex) {

                    }*/
                },
                {
                    name: "xiaoxi",
                    path: "Message",
                    component: Message,
                    children: [
                        {
                            name: "xiangqing",
                            path: "detail/:id/:title",
                            component: Detail,
                           /* props: {
                                a: 1,
                                b: 2
                            }*/
                            // 把参和restful风格的变量，给子组件的props
                            // props: true // QueryString无效

                            // 还有这种写法
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.params.title
                                }
                            }
                        }
                    ]
                },
            ]
        }
        //endregion
    ]
})

// 全局前置路由守卫  回调函数：每次路由切换之前被调用或初始化的时候被调用
router.beforeEach((to,from, next) => {
    console.log("@", to, from)
    // 这里写逻辑，拦截， 相当于 servlet 过滤器的思想
    next()
})

// 全局后置路由守卫 回调函数：每次路由切换之后被调用或初始化的时候被调用
router.afterEach((to,from) => {
    console.log("@", to, from)
    // 这里写逻辑，拦截， 相当于 servlet 过滤器的思想
})

export default router

